<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Gready Theme Documentation</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
	</style>
</head>


<body>
	<div class="container">
			
		<img src="assets/images/bg.jpg"/>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 09/18/2013<br>
					By: Supview<br>
					Email: <a href="mailto:hello@iamsupview.be">hello@iamsupview.be</a>
					</strong>
				</p>
			</div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a target="_blank" href="http://themeforest.net/user/Supview">here</a>. Thanks so much!</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#htmlStructure">HTML Structure</a></li>
			<li><a href="#cssFiles">CSS Files and Structure</a></li>
			<li><a href="#javascript">JavaScript</a></li>
			<li><a href="#contact">Newsletter</a></li>
			<li><a href="#credits">Sources and Credits</a></li>
		</ol>
		
		<hr>
		
		<h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
		<p>This theme is a one page portfolio. All of the information within the main content area is nested within a div with an id of "primaryContent". The general template structure is the same throughout the template. Here is the general structure looks like.</p>
		
		<img src="assets/images/htmlstructure.png" alt="HTML Structure" />
		<p></p>

		<p>		
		<p>As you can see, you can also edit the width of each columns and make display the work as you like! It's based on the Gumby Framework grid, you can see more informations here : <a href="http://gumbyframework.com/docs/grid/#!/basic-grid" target="_blank">Grid of Gumby Framework</a>.	

		<hr>

		<h3 id="cssFiles"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>
		
		<p>There's always a table of content like this one</p>

<pre>	
/*

	01. Key Frames & Font Face
	02. Generals Settings
	03. Header Section Settings
	04. Container Section Settings
	05. Testimonial Section Settings
	06. Join us Section Settings
	07. Sign In Section Settings
	08. Footer Section Settings
	09. Mobile Menu Settings
	10. Media Queries for Mobile Settings
	11. Media Queries for iPad/Tablet Settings	
			
*/

</pre>		

		<p>I'm using three CSS files in this theme.</p>

		<p>The first file named <b>style.css</b> contains all of the specific stylings for the page. The file is separated into sections like <b>this exemple:</b></p>  

<pre>	
/* 03. HEADER SECTION ================================================== */

	some code

/* 04. CONTAINER SECTION ================================================== */
	
	some code
	
/* 05. SIGN UP SECTION ================================================== */
	
	some code
	
/* 06. FOOTER SECTION ================================================== */
	
	some code
	
</pre>


		<p>The second file named <b>gumby.css</b> is the framework that i'm using. you have nothing to touch there. It's for the row and column.</p>  
		
		<p>If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.</p> 
				
				
		<p>The tirth file named <b>component.css</b> is the stylesheet for the social icon, the flexslider generals settings (for the testimonials).</p>


		<hr>
		
		<h3 id="javascript"><strong>C) JavaScript</strong> - <a href="#toc">top</a></h3>
		
		<p>This theme imports Nine Javascript files.</p>
		
		<ol>
			<li>jQuery 1.9.1</li>
			<li>jQuery Modernizr</li>
			<li>main.js</li>
			<li>plugins.js</li>
			<li>jquery.scrollto.js</li>
			<li>classie.js</li>
			<li>cbpScroller.js</li>
			<li>jquery.parallax-1.1.3.js</li>
			<li>jquery.scrollto.js</li>
		</ol>
		  
		<ol>
			<li>jQuery is a Javascript library that greatly reduces the amount of code that you must write.</li>
			<li>Modernizr make an altenative for others navigators if they don't accept some code.</li>
			<li>main.js contain little script for making the always top navigation, smooth scrolling etc. This is where you setup most the js library.</li>
			<li>plugins.js is used for some plugins like the flickering text for validate the form</li>
			<li>jquery.scrollto.js is used for smooth scrolling</li>
			<li>classie.js is used for reduced height of the navigation when you scroll down.</li>
			<li>cbpScroller.js is used for the side effect</li> 
			<li>jquery.parallax-1.1.3.js is used for the header background. <b>You can also add some others parallax backgkround in the main.js on any section.</b></li>
			<li>jquery.scrollto.js is used for smooth scrolling</li>
			
			
			
		</ol>
		
				<hr>
		
		<h3 id="contact"><strong>D) Newsletter Form</strong> - <a href="#toc">top</a></h3>
		
		
		<p> For using it with your E-Mail just replace the code below here on <b>line 3 of the from_sender.php</b> .
		
<pre>
$to = "hello@yourmail.com";
</pre>


				<hr>
		
		<h3 id="credits"><strong>E) Sources and Credits</strong> - <a href="#toc">top</a></h3>
		
		<p>I've used the following images, icons or other files as listed.
		
		<ul>
			<li>Gumby Framework - <a target="_blank" href="http://gumbyframework.com/">http://www.gumbyframework.com</a></li>
			<li>On Scroll Effect Layout from Codrops - <a target="_blank" href="http://tympanus.net/Blueprints/OnScrollEffectLayout/">http://tympanus.net/Blueprints/OnScrollEffectLayout/</a></li>
			<li>Apple Products from Pixeden - <a target="_blank" href="http://www.pixeden.com/">http://www.pixeden.com/</a></li>
			<li>Video Hosting from wistia - <a target="_blank" href="http://wistia.com/">http://wistia.com/</a></li>
			<li>Icon Hover Effects from Tympanus - <a target="_blank" href="http://tympanus.net/Development/IconHoverEffects/">http://tympanus.net/Development/IconHoverEffects/</a></li>	
			</ul>
		
		<hr>
		
		<p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. <strong>No guarantees, but I'll do my best to assist.</strong> If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p> 
				<p><a href="#toc">Go To Table of Contents</a></p>
				<p align="center"><a href="http://themeforest.net/user/Supview" target="_blank"><img src="assets/images/logo.png"/></a></p>
	</div><!-- end div .container -->
</body>
</html>